<template>
    <div>
        <div class="mt10 mb20">
            <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
        </div>
        <el-table class="sd" stripe border :data="tableData" v-loading="loading">
            <el-table-column align="center" prop="index" label="序号" width="100"></el-table-column>
            <el-table-column align="center" prop="date" label="预警时间"></el-table-column>
            <el-table-column align="center" prop="carType" label="车型"></el-table-column>
            <el-table-column align="center" prop="weatherType" label="受灾类型"></el-table-column>
            <el-table-column align="center" prop="region" label="所在区域"></el-table-column>
            <el-table-column align="center" prop="pushNums" label="推送通知数量"></el-table-column>
            <el-table-column align="center" prop="readNums" label="阅读数量"></el-table-column>
            <el-table-column align="center" prop="readC" label="阅读数量比例"></el-table-column>
            <el-table-column align="center" prop="realReadNums" label="有效阅读数量"></el-table-column>
            <el-table-column align="center" prop="realReadC" label="有效阅读数量比例"></el-table-column>
        </el-table>
        <el-pagination class="tpl-mg-t mt20 fr"
                        small
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                        :current-page="queryForm.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="queryForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        style="margin-bottom: 5px">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'messageDetail',
        data () {
            return {
                queryForm: {
                    pageNum: 1,
                    pageSize: 10
                },
                tableData: [],
                loading: false
            }
        },
        created () {
            this.queryList();
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            // 查询列表
            queryList () {
                let cData = [];
                cData = [
                    {"index": "1","date": "2020.5.10","carType": "全部","weatherType": "全部","region": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%"},
                    {"index": "2","date": "2020.5.11","carType": "全部","weatherType": "全部","region": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%"},
                    {"index": "3","date": "2020.5.12","carType": "全部","weatherType": "全部","region": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%"},
                    {"index": "4","date": "2020.5.13","carType": "全部","weatherType": "全部","region": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%"},
                    {"index": "5","date": "2020.5.14","carType": "全部","weatherType": "全部","region": "全部","pushNums": "100","readNums": "50","readC": "50%","realReadNums": "25","realReadC": "50%"},
                ];
                this.tableData = cData;
            },
            reset () {
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            },
            exportFile () {
                this.$message({ type: 'success', message: `导出成功!` })
            }
        }
    }
</script>

<style scoped>

</style>
